<template>
    <div>
        <h2>公告管理</h2>
      
        <button @click="sel=i" :class="[i==sel?'active':'']" v-for="(v,i) in tab">{{ v.tabname }}</button>
        <component :is="tab[sel].com"></component>
    </div>
</template>
<script lang="ts">
import Demo1 from '../components/Demo1.vue'
import Demo2 from '../components/Demo2.vue'
import Demo3 from '../components/Demo3.vue'

export default{
    components:{
        Demo1,
        Demo2,
        Demo3
    },
    data(){
        return {
            sel:0,
            tab:[
                {tabname:'按钮1',com:'Demo1'},
                {tabname:'按钮2',com:'Demo2'},
                {tabname:'按钮3',com:'Demo3'},
            ]
        }
    }
}
</script>
<style scoped>
    .active{
        background: red;
    }
</style>